<template>
  <div class="merchantsList">
    <div class="top">
      <div class="first_box pad">
        <el-input placeholder="请输入内容" v-model="inputtxt" class="input-with-select" v-if="statusType == 0">
          <el-select slot="prepend" v-model="statusType" placeholder="请选择" @change="select">
            <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id">
            </el-option> 
          </el-select>
        </el-input>
        <el-input placeholder="请输入内容" v-model="formInline.withdrawNo" class="input-with-select" v-if="statusType == 1">
          <el-select slot="prepend" v-model="statusType" placeholder="请选择" @change="select">
            <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-input>
        <el-input placeholder="请输入内容" v-model="formInline.serialNo" class="input-with-select" v-if="statusType == 2">
          <el-select slot="prepend" v-model="statusType" placeholder="请选择" @change="select">
            <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-input>
        <el-input placeholder="请输入内容" v-model="formInline.accountName" class="input-with-select" v-if="statusType == 3">
          <el-select slot="prepend" v-model="statusType" placeholder="请选择" @change="select">
            <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-input>
      </div>
      <div class="time pad">
        <span class="label">类型：</span>
        <el-select v-model="formInline.type" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="time pad">
        <span class="label">申请时间：</span>
        <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <div class="time pad">
        <span class="label">支付公司：</span>
        <el-select v-model="formInline.payProvider" placeholder="请选择">
          <el-option v-for="item in payProviderLs" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="formInline.areaId" placeholder="请选择">
          <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef">
          <div class="" v-for="item in type" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
            :value="item.id" @click="handleTab(item.id)">
            {{ item.value }}
          </div>
        </div>
        <export-excel-button title="提现列表" action="/platform/withdraw/manage/export" :params="ExportParams" />
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" v-if="currentNavtab == 0">
        <template v-slot:payProvider="{ scope }">
          <dict-tag :options="payProviderLs" :value="scope.row.payProvider" />
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookMerchant(scope.row)" size="small" v-if="scope.row.accountType == 1">查看商户</el-button>
          <el-button @click="toExamine(scope.row.id)" size="small" v-if="scope.row.accountType == 2">审核</el-button>
          <el-button @click="handleManual(scope.row.id)" size="small" v-if="scope.row.accountType == 1">手动结算</el-button>
          <el-button type="danger" @click="getDelete(scope.row.id)" size="small" v-if="scope.row.accountType == 1">删除
          </el-button>
        </template>
      </ex-table>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn2" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" v-if="currentNavtab == 1">
        <template v-slot:payProvider="{ scope }">
          <dict-tag :options="payProviderLs" :value="scope.row.payProvider" />
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)" size="small">查看</el-button>
        </template>
      </ex-table>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn3" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" v-if="currentNavtab == 2">
        <template v-slot:payProvider="{ scope }">
          <dict-tag :options="payProviderLs" :value="scope.row.payProvider" />
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)" size="small">查看</el-button>
        </template>
      </ex-table>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn4" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" v-if="currentNavtab == 3">
        <template v-slot:payProvider="{ scope }">
          <dict-tag :options="payProviderLs" :value="scope.row.payProvider" />
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)" size="small">查看</el-button>
          <el-button @click="payShow(scope.row.id)" type="warning" size="small">已完成打款</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog v-if="detailDialog" :id="id" :visible.sync="detailDialog" @success="_handleSuccess" />
    <manualDetailDialog v-if="manualDetailDialog" :id="id" :visible.sync="manualDetailDialog"
      @success="_handleSuccess" />
    <payment-dialog v-if="paysumitShow" :id="id" :visible.sync="paysumitShow" @success="_handleSuccess">
    </payment-dialog>
  </div>
</template>
<script>
  import {
    withdrawalList,
    adminDict,
    withdrawalListNew,
    deleteManaget,
  } from "@/api/moneyManagement";
  import {
    userAreaSelect
  } from "@/api/common";
  import handlePageMixin from "@/mixins/handlePageMixin";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import DetailDialog from "./components/DetailDialog";
  import manualDetailDialog from "./components/manualDetailDialog";
  import paymentDialog from "./components/paymentDialog";
  export default {
    name: "withdrawalList",
    components: {
      ExportExcelButton,
      DetailDialog,
      manualDetailDialog,
      paymentDialog
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        inputtxt: "",
        date: "",
        areaSelect: [], //区域下拉
        formInline: {
          areaId:'',//区域id
          withdrawNo: "", //提现单号
          serialNo: "", //流水号
          type: "", //查询类型
          accountName: "", //商家名称
          applyStartTime: "", //开始时间
          applyEndTime: "", //结束时间
          status: 1, //提现状态（1待审核 2 提现中 3 提现成功 4 提现失败）
          payProvider:'',//支付公司
        },
        statusType: 0,
        options: [{
            id: 0,
            value: "请选择"
          },
          {
            id: 1,
            value: "提现单号"
          },
          {
            id: 2,
            value: "交易流水号"
          },
          {
            id: 3,
            value: "商户账号名称"
          },
        ],
        type: [{
            id: 0,
            value: "待审核"
          },
          {
            id: 1,
            value: "提现成功"
          },
          {
            id: 2,
            value: "提现失败"
          },
          {
            id: 3,
            value: "处理中"
          },
        ],
        tableList: [],
        tableData: [],
        options2: [],
        payProviderLs:[],//支付公司下拉
        tableColumn: [
          {
            prop: "areaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "withdrawNo",
            label: "提现单号",
            width: "150"
          },
          {
            prop: "accountName",
            label: "商户账号名称",
            width: "150"
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "150"
          },
          {
            prop: "withdrawMoney",
            label: "申请提现金额（¥）",
            width: "180"
          },
          {
            prop: "accountMoney",
            label: "可用余额（¥）",
            width: "130"
          },
          {
            prop: "withdrawEndMoney",
            label: "提现后余额（¥）",
            width: "130"
          },
          {
            prop: "typeDict",
            label: "类型",
            width: "100"
          },
          {
            prop: "statusDict",
            label: "状态",
            width: "100"
          },
          {
            prop: "createTime",
            label: "申请时间",
            width: "180"
          },
          {
            // prop: "payProvider",
            slot: true,
            slotName: "payProvider",
            label: "支付公司",
            width: "180"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "280",
            fixed: "right",
          },
        ],
        tableColumn2: [
          {
            prop: "areaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "withdrawNo",
            label: "提现单号"
          },
          {
            prop: "serialNo",
            label: "交易流水号"
          },
          {
            prop: "accountName",
            label: "商户账户名称"
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "150"
          },
          {
            prop: "withdrawMoney",
            label: "申请提现金额（¥）"
          },
          // { prop: "taxes", label: "扣税（¥）", width: "150" },
          // { prop: "additionalTotal", label: "其他手续费（¥）", width: "150" },

          {
            prop: "practicalDeductMoney",
            label: "实际扣除金额（¥）",
          },
          {
            prop: "withdrawEndMoney",
            label: "提现后余额（¥）",
          },
          {
            prop: "statusDict",
            label: "状态",
          },
          {
            prop: "receivedTime",
            label: "到账时间",
            width: "100"
          },
          {
            // prop: "payProvider",
            slot: true,
            slotName: "payProvider",
            label: "支付公司",
             width: "120"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: 'right',
          },
        ],
        tableColumn3: [
          {
            prop: "areaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "withdrawNo",
            label: "提现单号",
            width: "150"
          },
          {
            prop: "serialNo",
            label: "交易流水号",
            width: "200",
          },
          {
            prop: "accountName",
            label: "商户账户名称",
            width: "200",
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "150"
          },
          {
            prop: "withdrawMoney",
            label: "申请提现金额（¥）",
             width: "120"
          },
          // { prop: "issueTotal", label: "扣税（¥）", width: "150" },
          // { prop: "additionalTotal", label: "其他手续费（¥）", width: "150" },
          {
            prop: "practicalDeductMoney",
            label: "实际扣除金额（¥）",
             width: "120"
          },
          {
            prop: "withdrawEndMoney",
            label: "提现后余额（¥）",
             width: "120"
          },
          {
            prop: "statusDict",
            label: "状态",
          },
          {
            prop: "remark",
            label: "备注",
            width: "150",
          },
          {
            prop: "disposeTime",
            label: "处理时间",
            width: "100"
          },
          {
            // prop: "payProvider",
            slot: true,
            slotName: "payProvider",
            label: "支付公司",
             width: "120"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "180",
            fixed: 'right',
          },
        ],
        tableColumn4: [
          {
            prop: "areaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "withdrawNo",
            label: "提现单号",
            width: "150"
          },
          {
            prop: "accountName",
            label: "商户账户名称",
            width: "150"
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "150"
          },
          {
            prop: "withdrawMoney",
            label: "申请提现金额（¥）",
            width: "150"
          },
          {
            prop: "accountMoney",
            label: "可用余额（¥）",
            width: "150"
          },
          {
            prop: "withdrawEndMoney",
            label: "提现后余额（¥）",
            width: "150"
          },
          // { prop: "bankNo", label: "提现卡号", width: "150" },
          {
            prop: "typeDict",
            label: "类型",
            width: "100"
          },
          {
            prop: "statusDict",
            label: "状态",
            width: "100"
          },
          {
            prop: "remark",
            label: "备注",
          },
          {
            prop: "createTime",
            label: "申请时间",
            width: "180"
          },
          {
            // prop: "payProvider",
            slot: true,
            slotName: "payProvider",
            label: "支付公司",
            width: "120"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "180",
            fixed: "right",
          },
        ],
        selData: "",
        value: "",
        // 选中的选项
        item: {},
        currentNavtab: 0,
        detailDialog: false,
        manualDetailDialog: false,
        paysumitShow: false,
        id: "",
      };
    },
    computed: {
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.pageOptions,
          // type: this.formInline.type,
          // name: this.formInline.name,
          // applyTime: this.formInline.applyTime,
          // linkageStatus: this.formInline.linkageStatus,
          ...this.formInline,
          applyStartTime: this.date[0],
          applyEndTime: this.date[1],
        };
        return params;
      },
    },
    created() {
      if(this.$route.query.id == 1){
        this.currentNavtab = 3
        this.formInline.status = 2;
      }
    },
    mounted() {
      // this.tableList = this.tableColumn
      this.getlinkagetype();
      this.getUserAreaSelect();
      this.getList();
    },
    methods: {
      getlinkagetype() {
        //获取字典下拉
        const params = {
          dictType: "platform_withdraw_manage_type,pay_provider",
        };
        adminDict(params).then((res) => {
          var arr = [{
            // id: '',
            value: "全部",
          }, ];
          this.options2 = arr.concat(res.result[0].dictList);
          this.payProviderLs = arr.concat(res.result[1].dictList);
        });
      },
      getUserAreaSelect() {
        //查询用户区域下拉框
        userAreaSelect().then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.areaSelect = arr.concat(res.result);
        });
      },
      select(value) {
        console.log("select", value);
        if (value == 3) {
          this.formInline.withdrawNo = "";
          this.formInline.serialNo = "";
        } else if (value == 1) {
          this.formInline.serialNo = "";
          this.formInline.merchantName = "";
        } else if (value == 2) {
          this.formInline.withdrawNo = "";
          this.formInline.merchantName = "";
        } else {
          this.formInline.withdrawNo = "";
          this.formInline.serialNo = "";
          this.formInline.merchantName = "";
        }
        this.statusType = value;
      },
      //切换选项
      handleTab(id) {
        console.log("id", id), (this.currentNavtab = id);
        if (id == 0) {
          //待审核
          this.formInline.status = id + 1;
        } else if (id == 1) {
          //提现成功
          this.formInline.status = id + 2;
        } else if (id == 2) {
          //提现失败
          this.formInline.status = id + 2;
        } else {
          //处理中
          this.formInline.status = 2;
        }
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      search() {
        //搜索
        console.log(this.formInline);
        this.formInline.applyStartTime = this.date[0];
        this.formInline.applyEndTime = this.date[1];
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      reset() {
        this.formInline = {};
        this.date = [];
        this.currentNavtab = 0;
        this.formInline.status = 1;
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      getList() {
        const params = {
          ...this.pageOptions,
          ...this.formInline,
        };
        this.loading = true;
        withdrawalListNew(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            // if(this.currentNavtab==0){

            // }
            this.tableData = records;
            this.$refs.table.pageOptions.total = total;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //删除
      getDelete(id) {
        this.$confirm("是否删除?", "提示", {
            confirmButtonText: "删除",
            cancelButtonText: "否",
          })
          .then(() => {
            deleteManaget(id)
              .then((res) => {
                const {} = res.result;
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                });
                this.getList();
              })
              .finally(() => {
                this.loading = false;
              });
          })
          .catch(() => {});
      },
      lookMerchant(row) {
        //查看商户
        this.$router.push({
          path: "/merchants/merchants-detail",
          query: {
            id: row.accountId,
            type: row.merchantType,
            activeName: "fourth",
          },
        });
      },
      lookDetail(e) {
        //查看提现账单详情
        this.$router.push({
          path: "/moneyManagement/withdrawal-details",
          query: {
            id: e.id,
            shopType: e.accountType,
          },
        });
      },
      toExamine(id) {
        console.log(id);
        this.id = id;
        this.detailDialog = true;
      },
      handleManual(id) {
        this.id = id;
        this.manualDetailDialog = true;
      },
      payShow(id) { //已完成打款
        this.id = id;
        this.paysumitShow = true;
        console.log(this.paysumitShow)
      },
      _handleSuccess() {
        this.getList();
      },
    },
  };

</script>
<style lang="scss" scoped>
  .merchantsList {
    padding: 20px;
  }

  .top {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    background: #fff;
    border-radius: 4px;

    .pad {
      padding-right: 24px;
      margin-bottom: 20px;
    }

    .time {
      .label {
        font-size: 14px;
        color: #606266;
      }
    }
  }

  .main {
    margin-top: 15px;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
  }

  .main_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 14px;
    color: #333;

    .lef {
      display: flex;
      justify-content: flex-start;
      border: 1px solid #dfe6ec;

      .list {
        width: 104px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-right: 1px solid #dfe6ec;
        cursor: pointer;
      }

      .list:nth-last-child(1) {
        border: none;
      }

      .active {
        background: #1890ff;
        color: #fff;
      }
    }
  }

  .el-select .el-input {
    width: 130px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 130px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
